<template>
	<view class="container">

		<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">

		</map>

		<view class="titleImg">
			<img :src="baseUrl + titleImg" alt="" />
		</view>

		<view class="goods-list">
			<view v-for="(goods, i) in list" :key="goods.id">
				
				
				<!-- <my-goods :isChecked="goods.isChecked" @checkChange="e=>onItemChange(e,goods)"
					:goods="goods"></my-goods> -->
					
				<view class="goods-item">
					<view class="goods-item-left">
						<radio :checked="goods.isChecked" @click="onItemChange(goods)"></radio>
						<image :src="baseUrl + goods.goodsimage" class="goods-pic"></image>
					</view>
					<view class="goods-item-right">
						<view class="goods-name">{{goods.goods_name}}</view>
						<view class="goods-details">{{goods.details}}</view>
						<view class="goods-price">￥<text>{{goods.price}}</text></view>
					</view>
				</view>	
					
			</view>
		</view>
		<view class="footer">
			<view class="footer-left">
				<radio :checked="allChecked" @click="allCheckClick"></radio>
				<text>全选</text>
			</view>
			<view class="footer-right">
				<button>提交订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				titleImg: "",
				baseUrl: uni.$http.baseUrl,
				allChecked: false,
				latitude: 34.749173,
				longitude: 113.658920,
				covers: [{
					id:100,
					latitude: 34.749173,
					longitude: 113.658920,
					iconPath: '../../static/image/location.png'
				}],

			};

		},
		onLoad() {
			this.getList()
		},
		computed: {
			// allChecked() {
			// 	return this.list.every(ele => ele.isChecked)
			// }
		},
		methods: {
			allCheckClick() {
				this.allChecked = !this.allChecked
				this.list.forEach(ele => ele.isChecked = this.allChecked)
			},
			onItemChange(goods) {
				// console.log('---onItemChange-----'+e);
				
				
				this.list = this.list.map(ele=>{
					if(ele.id == goods.id){
						goods.isChecked = !goods.isChecked
					}
					return ele
				})
				
				// goods.isChecked = !goods.isChecked
				// console.log('---goods--'+JSON.stringify(goods));
				
				// let findItem = this.list.find(ele => ele.id == goods.id)
				// findItem.isChecked = e
				console.log('stringify'+JSON.stringify(this.list));
				
				let ret = this.list.every(ele => ele.isChecked)
				console.log('ret -- '+ret);
				this.allChecked = ret
				// this.list = this.list
				// this.$forceUpdate()
			},
			async getList() {
				const res = await uni.$http.post('/api/index/index')
				this.list = res.data.data[0]
				this.list.forEach(ele => {
					ele.isChecked = false
				})
				this.titleImg = res.data.data[res.data.data.length - 1][0].value
			},

			// async login(){
			// 	const params = {
			// 		account: '17837365837',
			// 		password: 'a123456',
			// 		js_code: '0e1VHQll2MTbqd4lYPol2N8C9F3VHQlj'
			// 	}
			// 	const res = await uni.$http.post('/api/user/login', params)
			// 	console.log("res login~~", res)
			// }
		},
	}
</script>

<style lang="scss">
	.container {
		background-color: #F5F7FB;

	}

	.titleImg img {
		width: 686rpx;
		height: 140rpx;
		margin-left: 32rpx;
		margin-bottom: 24rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.footer {
		position: sticky;
		bottom: 0;
		z-index: 999;
		height: 134rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 27rpx 32rpx 27rpx 31rpx;

		.footer-right {
			width: 220rpx;
			height: 80rpx;

			button {
				background: linear-gradient(90deg, #FF880C 0%, #FF5200 100%);
				border-radius: 45rpx;
				color: #fff;
			}
		}

		.footer-left {
			text {
				color: #B7BDC4;
			}
		}
	}
	
	.goods-item {
		display: flex;
		width: 686rpx;
		height: 238rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-bottom: 24rpx;
		margin-left: 32rpx;
		padding: 28rpx 22rpx;
		// 设置盒模型为 border-box
		box-sizing: border-box;
	
		.goods-item-left {
			margin-right: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.goods-pic {
				width: 100px;
				height: 100px;
				display: block;
			}
		}
	
		.goods-item-right {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;
	
			.goods-name {
				font-size: 17px;
				font-weight: 700;
	
			}
	
			.goods-details {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #B7BDC4;
			}
	
			.goods-price {
				color: #ff590c;
				font-size: 16px;
	
				text {
					font-size: 20px;
					font-weight: 700;
				}
			}
		}
	}
</style>